<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>Add Class</title>
</h:head>
<f:view>
	<h:body background='../../../images/gradient_1.png'>
		<ui:composition template="../includes/template.xhtml">
			<ui:define name="mainbody">
				<center>
					<h:form>
						<p:panel header="Add Class" style="min-height: 550px"
							styleClass="prime_panel">
							<center>
								<p:growl id="growl" showDetail="true" sticky="false"
									autoUpdate="true" showSummary="false" />

								<table border="0" cellpadding="4px" cellspacing="8px">

									<tr>
										<td><h:outputText value="Class Title :" /> <h:outputText
												value="*" style="color:red" /></td>
										<td><p:inputText id="courseTitle" size="20"
												value="#{classBean.clas.classTitle}" required="true"
												requiredMessage="Please enter Class Title">
												<f:ajax execute="@this" event="blur" />
											</p:inputText>
										</td>
									</tr>

									<tr>
										<td><h:outputText value="Short Name :" /></td>
										<td><p:inputText id="shortName" size="20"
												value="#{classBean.clas.shortName}">

											</p:inputText>
										</td>
									</tr>

									<tr>
										<td><h:outputText value="Session :" /></td>
										<td><p:selectOneMenu value="#{classBean.clas.session}"
												effect="fade" converter="sessionConverter" style="width:160">
												<f:selectItems value="#{classBean.sessions}" var="s"
													itemLabel="#{s.sessionTitle}" itemValue="#{s}" />
											</p:selectOneMenu>
										</td>
									</tr>

									<tr>
										<td><h:outputText value="Currently offered: " /></td>
										<td><p:selectOneRadio id="genderOptions"
												style="width:222" value="#{classBean.clas.currentStatus}">
												<f:selectItem itemLabel="Offered" itemValue="true" />
												<f:selectItem itemLabel="Not Offered" itemValue="false" />
											</p:selectOneRadio>
										</td>
									</tr>

									<tr>
										<td><h:outputText value="Class Description :" /></td>
										<td><p:inputTextarea id="desc" rows="5" cols="20"
												value="#{classBean.clas.description}" />
										</td>
									</tr>
									<tr>
										<td colspan="2"><h:outputLabel>Assign Courses:</h:outputLabel>
											<h:outputText value="*" style="color:red" /> 
											<p:pickList
												id="coursesList" value="#{classBean.courses}" var="course"
												iconOnly="true" itemValue="#{course}"
												converter="courseConverter" required="true"
												requiredMessage="Please choose at least 1 Course">

												<f:facet name="sourceCaption">All Courses</f:facet>
												<f:facet name="targetCaption">Assigned Courses</f:facet>

												<p:column>
										           #{course.title}
										        </p:column>
											
											</p:pickList>
										</td>
									</tr>
									<tr>
										<td></td>
										<td style="text-align: right"><p:commandButton
												id="submit" value="Add Class" type="submit" ajax="false"
												action="#{classBean.performAction}" />
										</td>
									</tr>
								</table>
							</center>
						</p:panel>
					</h:form>
				</center>
			</ui:define>
		</ui:composition>
	</h:body>
</f:view>
</html>
